﻿@page "/maps/bubble"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the top 30 countries which has highest Internet users in bubbles of the year 2016</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render the bubbles for each shape in a map. <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSettings.html#Syncfusion_Blazor_Maps_MapsBubbleSettings_BubbleSettings'>MapsBubbleSettings</a></code> property is used to render the bubble in the maps. Values of the shapes can be visualized with the size and color of the bubbles. You can bind the desired colors from the data source to the bubbles. Tooltip is enabled in this example.</p>
   <p>More information about bubbles can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/bubble'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps Format="N0" UseGroupingSeparator="true">
        <MapsZoomSettings Enable="true" HorizontalAlignment="Alignment.Near" ToolBarOrientation="Orientation.Vertical" />
        <MapsTitleSettings Text="Top 30 countries with highest Internet users">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsLayers>
            <MapsLayer TValue="string" ShapeData='new {dataOptions ="data/maps/world-map.json"}' ShapeDataPath="Name" ShapePropertyPath="@ShapePropertyPath">
                <MapsShapeSettings Fill="#E5E5E5" />
                <MapsBubbleSettings>
                    <MapsBubble TValue="BubbleDataSource" Visible="true" ValuePath="Value" ColorValuePath="Color" MinRadius="3" MaxRadius="30" Opacity="0.8" DataSource="@BubbleData">
                        <MapsBubbleTooltipSettings Visible="true" ValuePath="Population" Format=" <b>${Name}</b> <br> Rank : ${Rank} <br> Population : ${Population}" />
                    </MapsBubble>
                </MapsBubbleSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        Source:
        <a href="https://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users"
            target="_blank">en.wikipedia.org</a>
    </div>
</div>

@code {
    public string[] ShapePropertyPath = { "name" };
    public class BubbleDataSource
    {
        public double Rank { get; set; }
        public string Name { get; set; }
        public double Value { get; set; }
        public string Color { get; set; }
        public double Population { get; set; }
    }
    public List<BubbleDataSource> BubbleData = new List<BubbleDataSource> {
        new BubbleDataSource { Rank=1, Name="China", Value=26.069578973425973, Color="#7F38A0", Population=746662194 },
        new BubbleDataSource { Rank=2, Name="India", Value=18.89685398845257, Color="#7F38A0", Population=391292635 },
        new BubbleDataSource { Rank=3, Name="United States", Value=14.990417962652455, Color="#99295D", Population=245436423 },
        new BubbleDataSource { Rank=4, Name="Brazil", Value=10.697262204318639, Color="#364A98", Population=123927230 },
        new BubbleDataSource { Rank=5, Name="Japan", Value=10.422287570687047, Color="#7F38A0 ", Population=117528631 },
        new BubbleDataSource { Rank=6, Name="Russia", Value=10.089306526634514, Color="#2E769F", Population=110003284 },
        new BubbleDataSource { Rank=7, Name="Mexico", Value=8.418801064678872, Color="#99295D ", Population=75937568 },
        new BubbleDataSource { Rank=8, Name="Germany", Value=8.282889333650484, Color="#2E769F", Population=73436503 },
        new BubbleDataSource { Rank=9, Name="Indonesia", Value=7.879039972067535, Color="#7F38A0", Population=66244991 },
        new BubbleDataSource { Rank=10, Name="United Kingdom", Value=7.651679331043155, Color="#2E769F", Population=62354410 },
        new BubbleDataSource { Rank=11, Name="Philippines", Value=7.348442786566801, Color="#7F38A0", Population=57342723 },
        new BubbleDataSource { Rank=12, Name="France", Value=7.228345476030295, Color="#2E769F", Population=55413854 },
        new BubbleDataSource { Rank=13, Name="Nigeria", Value=6.72959402904, Color="#816F28", Population=47743541 },
        new BubbleDataSource { Rank=14, Name="South Africa", Value=6.6856680708458756, Color="#816F28", Population=47094267 },
        new BubbleDataSource { Rank=15, Name="Turkey", Value=6.638068972304476, Color="#2E769F", Population=46395500 },
        new BubbleDataSource { Rank=16, Name="Vietnam", Value=6.47045421651179, Color="#7F38A0", Population=43974618 },
        new BubbleDataSource { Rank=17, Name="Iran", Value=6.382686592525635, Color="#7F38A0", Population=42731675 },
        new BubbleDataSource { Rank=18, Name="Egypt", Value=6.000680715088463, Color="#816F28", Population=37519531 },
        new BubbleDataSource { Rank=19, Name="Spain", Value=5.986907015968912, Color="#2E769F", Population=37337607 },
        new BubbleDataSource { Rank=20, Name="Italy", Value=5.918665740634295, Color="#2E769F", Population=36442438 },
        new BubbleDataSource { Rank=21, Name="Thailand", Value=5.625230051446806, Color="#7F38A0", Population=32710169 },
        new BubbleDataSource { Rank=22, Name="Canada", Value=5.616559775760331, Color="#99295D", Population=32602776 },
        new BubbleDataSource { Rank=23, Name="Argentina", Value=5.465557178364858, Color="#364A98", Population=30758972 },
        new BubbleDataSource { Rank=24, Name="South Africa", Value=5.422995621836727, Color="#816F28", Population=30248355 },
        new BubbleDataSource { Rank=25, Name="Pakistan", Value=5.399304527495543, Color="#7F38A0", Population=29965859 },
        new BubbleDataSource { Rank=26, Name="Bangladesh", Value=5.380175142326848, Color="#7F38A0", Population=29738660 },
        new BubbleDataSource { Rank=27, Name="Colombia", Value=5.256315557569104, Color="#364A98", Population=28287098 },
        new BubbleDataSource { Rank=28, Name="Poland", Value=5.233074393714942, Color="#2E769F", Population=28018492 },
        new BubbleDataSource { Rank=29, Name="Malaysia", Value=4.925185411253049, Color="#7F38A0", Population=24572446 },
        new BubbleDataSource { Rank=30, Name="Saudi Arabia", Value=4.853802121487009, Color="#7F38A0", Population=23803319 }
    };
}